<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome Winamp Theme Example</title>
    <script type="module" src="../../../dist/index.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/winamp/+esm"></script>
  </head>
  <body>
    <h1>Media Chrome - Winamp Theme Example</h1>

    <style>
      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-theme-winamp {
        display: block;         /* expands the container if preload=none */
        width: 275px;       /* allows the container to shrink if small */
        height: 260px;
      }
    </style>

    <media-theme-winamp>
      <video
        playsinline
        slot="media"
        src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
      >
        <track
          label="English"
          kind="captions"
          srclang="en"
          default
          src="./vtt/en-cc.vtt"
        />
      </video>
    </media-theme-winamp>
  </body>
</html>
